<template>
    <div class="obs-data-box">
        <form-layout>
            <!-- 表单内容 -->
            <template slot="form">
                <form-tab :tabList="tabList" v-model="tabActive" style="margin-top: 15px;" />

                <form-title title="模式选择">
                    <el-radio-group v-model="form.model" class="two-part">
                        <el-radio label="RUC">高原所RUC</el-radio>
                        <el-radio label="EC">EC</el-radio>
                    </el-radio-group>
                </form-title>
                <form-title title="区域选择">
                    <el-radio-group v-model="form.area" class="two-part">
                        <el-radio label="XN">西南</el-radio>
                        <el-radio label="西藏">西藏</el-radio>
                        <el-radio label="全国">全国</el-radio>
                    </el-radio-group>
                </form-title>
                <form-title title="地面要素" :fold="104">
                    <el-checkbox-group :value="form.elements" @input="changeElements" class="two-part">
                        <el-checkbox :label="element.id" v-for="element in groundElements" :key="element.id">{{
        element.name
}}</el-checkbox>
                    </el-checkbox-group>
                </form-title>
                <form-title title="高空要素">
                    <upper-air :upperAir="form.elements" @change="changeElements" :upper-air-list="upperAirList"
                        :height-number-list="heightNumberList" />
                </form-title>
                <form-title title="不稳定度">
                    <el-checkbox-group :value="form.elements" @input="changeElements" class="two-part">
                        <el-checkbox label="CAPE">对流性CAPE指数</el-checkbox>
                        <el-checkbox label="CIN">对流抑制</el-checkbox>
                        <el-checkbox label="抬升指数">抬升指数</el-checkbox>
                        <el-checkbox label="K指数">K指数</el-checkbox>
                        <el-checkbox label="Sweat指数">Sweat指数</el-checkbox>
                        <el-checkbox label="24小时变压变温">24小时变压变温</el-checkbox>
                        <el-checkbox label="1000-500hpa厚度" title="1000-500hpa厚度">1000-500hpa厚度</el-checkbox>
                        <el-checkbox label="0-1km垂直风切变" title="0-1km垂直风切变">0-1km垂直风切变</el-checkbox>
                    </el-checkbox-group>
                </form-title>
                <form-title title="模式探空曲线和时间序列图">
                    <el-checkbox-group v-model="check" class="two-part">
                        <el-radio label="T-LOGP图">T-LOGP图</el-radio>
                        <el-radio label="机场时序预报">机场时序预报</el-radio>
                    </el-checkbox-group>
                </form-title>
            </template>
            <!-- 右侧查询内容展示 -->
            <template slot="content">
                <div class="content-box">
                    <form-title title="起报时间" style="margin-top:0px" class="report-time-title" />
                    <div class="form-box blue-form-cus-style">
                        <div class="control-box">
                            <date-control v-model="form.dateTime" />
                            <control-button v-model="isPlay" @change="control" style="margin-top:10px;" />
                        </div>
                        <multi-time-slider ref="multiSlider" :isPlay.sync="isPlay" :dateTime="this.form.dateTime"
                            :timeStep="60" @input="sliderInput" />
                    </div>
                    <div class="image-out-box-overlay" v-if="tabActive == 'overlay'" key="overlay">
                        <img class="image-inner" :src="'/image/' + imageList[index]"
                            v-for="(item, index) in form.elements" :key="getTitle(item)">
                    </div>
                    <div class="image-out-box-contrast" v-if="tabActive == 'contrast'" key="contrast">
                        <div class="contrast-item" v-for="(item, index) in form.elements" :key="getRadom(item)"
                            :style="{ width: imagePoint != 1 && '49%', height: (imagePoint == 3 || imagePoint == 4) && '50%' }">
                            <span class="item-title">{{ getTitle(item) }}</span>
                            <div class="image-inner-box">
                                <div v-if="imageList[index]">
                                    <img class="image-inner" :src="'/image/' + imageList[index]"
                                        style="background:#FFF;">
                                    <img class="image-inner" src="./XN.png">
                                </div>
                                <div v-else class="image-inner-bg">
                                    <img class="image-inner" src="./noPic.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </form-layout>
    </div>
</template>
<script>
import dayjs from 'dayjs'
import serviceAxios from "@/utils/axios.js";
export default {
    data() {
        return {
            dayjs,
            isPlay: false,
            tabList: [
                { name: "多图对比分析", id: "contrast" },
                { name: "多图叠加展示", id: "overlay" },
            ],
            groundElements: [
                { name: '2m温度', id: 'TMP2M' },
                { name: '2m相对湿度', id: 'RH2M' },
                { name: '10m风', id: 'WIND10M' },
                { name: '组合反射率', id: '组合反射率' },
                { name: '云顶高度', id: 'CTH' },
                { name: '云底高度', id: 'CBH' },
                { name: '3h降水', id: '3h降水' },
                { name: '6h降水', id: '6h降水' },
                { name: '12h降水', id: '12h降水' },
                { name: '24h降水', id: '24h降水' },
                { name: '降雪量', id: '降雪量' },
                { name: '降水类型', id: '降水类型' },
                { name: '总云量', id: 'TCDC' },
                { name: '大气可降水量', id: 'PWAT' },
                { name: '海平面气压', id: '海平面气压' },
            ],
            tabActive: 'contrast',
            upperAirList: [
                { name: "高度", id: "HGT" },
                { name: "风", id: "WIND" },
                { name: "阵风", id: "RH" },
                { name: "W", id: "W" },
                { name: "温度", id: "TMP" },
                { name: "露点", id: "TD" },
                // { name: "湿度", id: "RH" },
                { name: "涡度", id: "H" },
            ],
            heightNumberList: [200, 400, 500, 600, 700, 850],
            check: [],
            reportTime: undefined,
            fcstTime: undefined,
            form: {
                model: "RUC",
                area: "XN",
                elements: [
                    'TMP2M',
                    { "product": "WIND", "height": 200 }
                ],
                dateTime: '2022-12-10 16:00:00',
            },
            imageList: []
        }
    },
    watch: {
        form: {
            deep: true,
            handler: 'getPictures'
        },
    },
    computed: {
        imagePoint() { return this.form.elements.length }
    },
    created() {
        // this.getPictures()
    },
    methods: {
        changeElements(elements) {
            if (elements.length > 4) {
                this.$message.error("元素不能超过4个")
            } else {
                this.form.elements = elements
            }
        },
        getTitle(element) {
            if (element?.product) {
                const elementName = this.upperAirList.find(item => item.id == element?.product)?.name
                return `${elementName}_${element.height}hPa`
            } else {
                return this.groundElements.find(item => item.id == element)?.name
            }
        },
        getRadom() { return Math.random() },
        control(type) { this.$refs?.multiSlider[type]() },
        async sliderInput(...args) {
            const [, , reportTime, fcstTime] = args
            this.reportTime = reportTime
            this.fcstTime = fcstTime
            this.getPictures()
        },
        async getPictures() {
            const { model, area, elements } = this.form
            const requestList = elements.map(element => {
                const arg = {
                    model,
                    area,
                    // product: 'WIND',
                    // element: "WIND_200hPa",
                    reportTime: this.reportTime,
                    fcstTime: this.fcstTime
                }
                if (element?.product) {
                    arg.product = element?.product
                    arg.element = `${element?.product}_${element?.height}hPa`
                } else {
                    arg.element = arg.product = element
                }
                return serviceAxios.get('/model/getPicsByFcstTimeAndLastReportTime', { params: arg })
            })
            const resultList = await Promise.all(requestList)
            this.imageList = resultList.map(result => result?.[0]?.PicPath)
        }
    }
}
</script>
<style scoped lang="scss">
.obs-data-box {
    height: 100%;

    .content-box {
        display: flex;
        flex-direction: column;
        height: 100%;

        .report-time-title {
            position: relative;
            width: 100%;

            &::after {
                content: '';
                position: absolute;
                width: calc(100% - 130px);
                height: 0px;
                right: 18px;
                top: 11px;
                border-bottom: 1px dotted rgba(255, 255, 255, .5);
            }
        }

        .form-box {
            width: 100%;
            display: flex;
            padding: 10px 10px 0 0;
            box-sizing: border-box;

            .control-box {
                display: flex;
                flex-direction: column;


            }
        }

        .image-out-box-overlay {
            flex: 1;
            overflow: hidden;
            position: relative;

            .image-inner {
                // opacity: .1;
                position: absolute;
                left: 50%;
                top: 50%;
                max-height: 90%;
                max-width: 100%;
                transform: translate(-50%, -50%);
                overflow: hidden;
            }

        }

        .image-out-box-contrast {
            flex: 1;
            overflow: hidden;
            position: relative;
            display: flex;
            color: #FFF;
            width: 100%;
            height: 100%;
            padding: 5px 0px 15px 0px;
            box-sizing: border-box;
            flex-wrap: wrap;
            justify-content: space-between;

            .contrast-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                height: 100%;
                width: 100%;
                box-sizing: border-box;

                .item-title {
                    font-size: 18px;
                    margin: 1% 0;
                }

                .image-inner-box {
                    position: relative;
                    flex: 1;
                    width: 100%;



                    .image-inner {
                        position: absolute;
                        max-width: 100%;
                        max-height: 100%;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        overflow: hidden;
                    }
                }

            }

        }
    }
}
</style>


<style scoped lang="scss">

</style>